<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<%@ page import="java.io.*, java.sql.*, java.util.*,LS.*,date.*" %>

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>


<!DOCTYPE html>
<html lang="UTF-8">
<style>
th,td {
	padding-bottom: 5px;
	padding-top: 5px;
}

#title{
	font: 17px;
	font-weight:bold;
	text-align: right;
	width: 90px;
}

#result{
	text-align:left;
}

#content{
	text-align: left;
}
#title, #content{
}
.txta{
	width:90%;
	height:100%;
}

#content{

}

b.text{
	font-size: 25px;
	margin-bottom: 10px;
}
h4,h1 {
	margin: 0px;
	padding: 0px;
}
th{
	height:30px;
	border-right: 1px solid #e5e5e5;
	border-bottom: 1px solid #e5e5e5;
}
tr{
	border-bottom: 1px solid #e5e5e5;
}
table {
	width: 100%;
}

.explain{
	color: red;
	font-size: 11px;
	border-bottom: 2px;
	text-align: right:
}
#outerview {
	padding-top: 10px;
	margin-left: 0px;
	text-align: center;
	background-color: #fff;
	border: 1px solid #e5e5e5;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
	-moz-box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
	box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
}
#outerview {
	width: 100%;
	min-height: 650px;
	padding: 0px;
}
#middleview{
	width: 90%;
	min-height: 450px;
	margin: 20px auto 0px auto;
	left: 50%;
	
}
#innerview {
	width: 100%;
	min-height: 450px;
 	text-align: center;
	background-color: #fff;
	border: 1px solid #e5e5e5;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
	-moz-box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
	box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
} 

#innerviewleft,#innerviewright{
	margin-left:0px;
	padding-left:0px;
}

#plusview {
	margin:10px;
	margin-bottom:0px;
	text-align: left;
}
.tableview{
	width:100%;
	min-height: 450px;
	left:50%;
}

.lendingdate{
	width:20%;
}
.notify{
	width:10%;
}
</style>

<head>
	<meta charset="utf-8">
	<title>성공회대학교 기자재 대여 시스템</title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	
	<!-- styles시트 -->
	<link href="/LSsystem/assets/css/bootstrap.css" rel="stylesheet">
	<link href="/LSsystem/assets/css/bootstrap-responsive.css" rel="stylesheet">
	<link href="/LSsystem/assets/css/docs.css" rel="stylesheet">	
</head>
	<!-- jQuery + javascript
    ================================================== -->
    
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
	<script type="text/javascript">
		/* 연장신청 버튼 누르기 전에 확인한다. */
		function beforeSubmitExtendBtn(fm) {
			// 연장 사유 텍스트 박스
			var text = document.getElementById('reasonText').value;
			// 이미 예약되었는지 확인
			var reservedOrNot = document.getElementById('reservedOrNot').value;
			// 이미 연장되었는지 확인
			var extendedOrNot = document.getElementById('extendedOrNot').value;
			
			if(text == "") {
				alert("연장실패: 연장 사유를 입력하세요.");
				return false;
			}
			else if(reservedOrNot == "true") {
				alert("연장실패: 예약된 기자재 입니다.");
				return false;
			}
			else if(extendedOrNot == "true") {
				alert("연장실패: 이미 연장신청 되었습니다.");
				return false;
			}
			
			return confirm("해당 기자재를 연장 하시겠습니까?");
		}
	</script>

<body data-spy="scroll" data-target=".bs-docs-sidebar">
	<!-- 메뉴
    ================================================== -->
	 <%
	 /* 게시판에서 사용하기 위해 if문 밖에서 get함 */
	 Users u = (Users)session.getAttribute("user");
	 if(u == null) {%>
		<jsp:include page="/top.do"></jsp:include>
		<%}else{
	    	if(u.getUser_position().equalsIgnoreCase("S")){%>
			<!-- 학생이 로그인 했을 경우 메뉴 -->
			<jsp:include page="/studenttop.do"></jsp:include>
			<%}else if(u.getUser_position().equalsIgnoreCase("P")) {%>
			<!-- 교수가 로그인 했을 경우 메뉴 -->
			<jsp:include page="/teachertop.do"></jsp:include>
			<%}else{%>
			<!-- 관리자가 로그인 했을 경우 메뉴 -->
			<jsp:include page="/managertop.do"></jsp:include>
    <%}}%>
	<!-- 게시판
    ================================================== -->
			
		<div style="text-align: center">
			<div class="marketing" style="margin-bottom:30px;color: #000; text-align: left">
			<div class="container">
				<h3 style="margin:10px;font-size: 35px;"><strong>연장</strong></h3>
			</div>
			</div>
		</div>
		
		
		<div class="container">
			<div id="outerview">
				<div id="middleview">
				
					<div id="plusview">
						<form method="post">
							<b class="text">연장 기자재 선택</b>&nbsp;&nbsp;
							
							<!-- 컨트롤러에서 id로 모델 이름을 가져와서 리스트 박스에 배열 -->
							<select name="modelName" style="width: 200px;">
								<c:forEach var="equipments" items="${selectModelNameByUserId}">
									<option>${equipments.model_name}</option>
								</c:forEach>
							</select>
							
							<input class="btn" type="submit" style="margin-bottom:10px;" value="선택완료">
						</form>
						<b class="explain">* 연장은 단 1회만 가능합니다.<br>* 연장불가능 상태 : 해당 기자재 예약자 존재시, 연장한도 초과시, 패널티 존재시 등등..</b>
					</div>
					
					<!-- <form method="post" onsubmit="return beforeSubmitExtendBtn(this)"> -->	<!-- 게시판 내용을 전달하는 폼 -->
					<form method="post" action="extendBtn.do" onsubmit="return beforeSubmitExtendBtn(this)">
						<div id="innerview">
							<div id="innerviewleft" class="span6">
								<br>
								<% 
								String modelName = request.getParameter("modelName");
								
								/* 로그인이 되어있고 대여한 모델이 존재할경우에만 게시판을 웹에 출력. */
								if(u != null && modelName != null) {
								%>
								
								<div id="title" class="span2">소속학과</div><div id="content" class="span2">
									<c:forEach var="d" items="${ departments }">
										${d.departments_name}<br>
									</c:forEach>
								</div><br><br>
								
								<div id="title" class="span2">학번</div><div id="content" class="span2"><%= u.getUser_id() %></div><br><br>
								<div id="title" class="span2">학년</div><div id="content" class="span2"><%= u.getGrade() %></div><br><br>
								<div id="title" class="span2">이름</div><div id="content" class="span2"><%= u.getName() %></div><br><br>
								<div id="title" class="span2">연락처</div><div id="content" class="span2"><%= u.getPhone() %></div><br><br>
								<div id="title" class="span2">품목명</div><div id="content" class="span2">${ selectVwIELUByUserIdModelName.item_name }</div><br><br>
								<div id="title" class="span2">모델명</div><div id="content" class="span2">${ selectVwIELUByUserIdModelName.model_name }</div><br><br>
								<div id="title" class="span2">대여일</div><div id="content" class="span2"><fmt:formatDate pattern="yyyy년 MM월 dd일" value="${ selectVwIELUByUserIdModelName.lending_start_date }" />
								</div><br><br>
								<div id="title" class="span2">신청일자</div><div id="content" class="span2"><fmt:formatDate pattern="yyyy년 MM월 dd일" value="${ selectVwIELUByUserIdModelName.apply_date }" />
								</div><br><br>
								<div id="title" class="span2">연장 사유</div><div id="content" class="span4"><textarea name="inputReason" class="txta" id="reasonText"></textarea></div>
								<% } %>
							</div>
							<div id="innerviewright" class="span5"></div>
						</div>
						<div  style="text-align: right;">
							<Button name="extend" class="btn" type="submit">연장 신청 완료</Button>
						</div>
						<!-- 연장할 기자재의 예약 및 연장 상태를 확인 -->
						<input type="hidden" id="reservedOrNot" value="${reservedOrNot}" />
						<input type="hidden" id="extendedOrNot" value="${extendedOrNot}" />
						<input type="hidden" name="modelName" value="<%= modelName %>" />
					</form>
				</div>
			</div>
		</div>
		
		
	<!-- 꼬리말
    ================================================== -->
	<footer class="footer">
		<div class="container">
			<p>
				Copyright SKHU. Software Student.
			</p>
		</div>
	</footer>
</body>
</html>
